import VueRouter from "vue-router";
//下面这两种引入  静态导入
// 组件会在​​主包（如 app.js）​​中打包。
// 无论用户是否访问该路由，组件代码都会在初始加载时下载​​。
import SchoolDemo from "@/components/pages/SchoolDemo";
import StudentDemo from "../components/pages/StudentDemo";

export default new VueRouter({
  mode: "history",
  routes: [
    {
      name: "index",
      path: "/index",
      // 组件会被单独打包为独立的 ​​chunk 文件​​（如 0.js、1.js）。
      // ​​按需加载​​：只有当用户访问对应路由时，才会下载该组件的代码。
      // 显著减少主包体积，提升​​首屏加载速度​​。
      component: () => import("../components/pages/HelloWorld"), //动态导入
    },
    {
      path: "/school", //一级路由
      component: SchoolDemo,
      children: [
        // 二级路由
        {
          path: "student", // 不要以 / 开头
          component: () => import("../components/pages/StudentDemo"),
          children: [
            // 三级路由
            {
              name: "subjectDetail",
              path: "detail",
              component: () => import("../components/pages/SubjectDetail.vue"),
              props: true,// props 为true时，路由params参数会以props的形式传入,如果是query参数传递的那么就要将props写成函数，函数参数是$route.query
            },
          ],
        },
      ],
    },
    {
      name: "student",
      path: "/student",
      component: StudentDemo,
      children: [
        {
          name:"detail",
          path:"/detail",
          component:()=>import("../components/pages/SubjectDetail.vue"),
        }
      ]
    },
    {
      path: "/todos",
      component: () => import("../components/pages/TodosApp"),
    },
    {
      path: "/elementui",
      component: () => import("../components/pages/ElementUI"),
    }
    
  ],
});
